<template>
  <div>
    <Notification></Notification>
<!--      logo吸顶-->
    <van-sticky>
      <div class="logoBox" @click="backTop">
        <p class="logo1">亿达</p>
        <p class="logo2">亿达商城样样有，买卖就在家门口</p>
      </div>
    </van-sticky>
    <!--    搜素-->
      <router-link to="/search" tag="div" class="searchBox">
        <van-search shape="round" background="#EC0D0D" v-model="value" placeholder="搜索商品-好货等你" />
      </router-link>
    <!--    轮播图-->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in imgList" :key="index" :style="'background-image: url('+item+');'">
<!--        <img :src="item.coverImgUrl" alt="">-->
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import {carousel} from "@/api/api";
import Notification from "@/components/Index/Notification";

import wannut from '../../assets/walnut.webp';
import electronic from '../../assets/electronic.jpg';
import pen from '../../assets/pen.webp';
import milk from '../../assets/milk.webp';
import handCream from '../../assets/handCream.webp';

export default {
  name: "Header",
  components:{
    Notification,
  },
  data() {
    return {
      //搜索
      value: '',
      //  轮播图
      imgList:[
          wannut,
          electronic,
          milk,
          pen,
          handCream,

      ],
    };
  },
  methods:{
    backTop(){
      document.documentElement.scrollTop = 0;
    }
  },
  created() {
    //  轮播图
    carousel().then(res=>{
      // console.log(res)
      if(res.data.code == 0){
        // this.imgList = res.data.rows
      }
    })
  }
}
</script>

<style lang="less" scoped>
  *{
    padding: 0;
    margin: 0;
  }
/deep/.van-search .van-cell{
  padding-left: 10px;
}
  .logoBox{
    background-color: #EC0D0D ;
    padding:5px 10px;
    align-items: center;
    .logo{
      width: 40px;
      height: 40px;
      border-radius: 15px;
      margin: 0 20px;
    }
    p{
      font-style: italic;
      font-family: "仿宋";
      color: white;
    }
    .logo1{
      font-size: 20px;
    }
    .logo2{
      font-size: 14px;
    }
  }
  .searchBox{
    position: relative;
    top: -2px;
    height: 130px;
    padding: 10px;
    background-color: #EC0D0D ;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
  }
  //  轮播图
  /deep/.van-swipe{
    margin: auto;
    width: 88%;
    position: absolute;
    top: 118px;
    left: 25px;
    .van-swipe-item{
      width: 100%;
      height:160px;
      border-radius: 16px;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
</style>